import { createApp } from 'vue'
import '~/assets/globalStyle.css'
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue'
//windicss
import 'virtual:windi.css'
//echarts
import * as echarts from 'echarts'
import 'echarts/theme/dark'

// echarts全局配置
echarts.registerTheme('custom', {
    color: [
        '#05c3f9', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6',
        '#06b6d4', '#10b981', '#f97316', '#ec4899', '#6366f1'
    ],
    backgroundColor: 'transparent',
    textStyle: {
        fontFamily: 'Microsoft YaHei, Arial, sans-serif',
        fontSize: 12,
        color: '#ffffff'
    },
    title: {
        textStyle: {
            color: '#ffffff',
            fontSize: 16,
            fontWeight: 'bold'
        }
    },
    legend: {
        textStyle: {
            color: '#ffffff'
        }
    },
    grid: {
        borderColor: 'rgba(255, 255, 255, 0.1)'
    },
    categoryAxis: {
        axisLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            }
        },
        axisTick: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            }
        },
        axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
            }
        }
    },
    valueAxis: {
        axisLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            }
        },
        axisTick: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            }
        },
        axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)'
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
            }
        }
    }
});

// 设置echarts默认配置
echarts.init.defaultTheme = 'custom';

// echarts工具函数
const echartsUtils = {
    // 创建响应式图表
    createResponsiveChart(dom, option, theme = 'custom') {
        const chart = echarts.init(dom, theme);
        chart.setOption(option);

        // 添加窗口大小变化监听
        const resizeHandler = () => {
            chart.resize();
        };
        window.addEventListener('resize', resizeHandler);

        // 返回图表实例和清理函数
        return {
            chart,
            dispose() {
                window.removeEventListener('resize', resizeHandler);
                chart.dispose();
            }
        };
    },

    // 获取响应式字体大小
    getResponsiveFontSize() {
        const width = window.innerWidth;
        if (width <= 768) return 10;
        if (width <= 1024) return 12;
        if (width <= 1440) return 14;
        return 16;
    },

    // 获取响应式图表高度
    getResponsiveHeight(baseHeight = 300) {
        const width = window.innerWidth;
        if (width <= 768) return baseHeight * 0.7;
        if (width <= 1024) return baseHeight * 0.8;
        return baseHeight;
    },

    // 通用图表配置
    getCommonOption() {
        return {
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicOut',
            textStyle: {
                fontFamily: 'Microsoft YaHei, Arial, sans-serif',
                fontSize: this.getResponsiveFontSize()
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'rgba(5, 195, 249, 0.5)',
                borderWidth: 1,
                textStyle: {
                    color: '#ffffff',
                    fontSize: this.getResponsiveFontSize()
                }
            }
        };
    }
};

const app = createApp(App)
//全局挂载公共工具类
import Msg from '~/utils/msg'
import { randomCode, operationType, yesNo, hasPerm, hasRole } from '~/utils/sys'
import { LoadDicts, DICT } from '~/utils/dict'
app.config.globalProperties = {
    //消息提示
    $msg: Msg,
    //生成随即编码
    randomCode: randomCode,
    //操作类型
    operationType: operationType,
    //'是/否' 枚举
    yesNo: yesNo,
    //字典枚举
    DICT: DICT,
    //加载字典
    LoadDicts: LoadDicts,
    //权限校验
    hasPerm: hasPerm,
    //角色校验
    hasRole: hasRole,
    //echarts实例
    $echarts: echarts,
    //echarts工具函数
    $echartsUtils: echartsUtils
}

//状态管理
import pinia from '~/store'
app.use(pinia)

//路由
import Router from './router'
app.use(Router)

//arco
app.use(ArcoVue)
//arco图标
app.use(ArcoVueIcon)

//字典转换组件
import DictValue from '~/components/dictValue/index.vue'
app.component('dict-convert', DictValue)

//分页组件
import Pagination from '~/components/pagination/index.vue'
app.component('pagination', Pagination)

//自定义权限指令
import permission from "~/directives/permission.js";
app.use(permission)
//自定义角色限指令
import role from "~/directives/role.js";
app.use(role)

app.mount('#app')
